<template>
    <view class="container">
        <view class="select1">
            <uni-data-select
                v-model="selectedValue"
                :localdata="selectData"
                @change="change">
            </uni-data-select>
        </view>
    </view>
    <view v-if="selectedValue==0">
        <view class="card1">
            <uni-row>
                <uni-col :span="3">
                    <image src="../../static/dengji.png" class="photo"></image>
                </uni-col>
                <uni-col :span="21">
                    <view class="zik"></view>
                    <text class="zi">00000000000年春节放假</text>
                </uni-col>
            </uni-row>
            <view class="zi2k">
                <text class="zi2">
                    假期开始时间：2023-11-16 00:00:00\n
                    假期结束时间：2023-11-16 00:00:00\n
                    时长：26天
                </text>
            </view>
        </view>
    </view>

    <view v-if="selectedValue==1">
        <view class="card1">
            <uni-row>
                <uni-col :span="3">
                    <image src="../../static/dengji.png" class="photo"></image>
                </uni-col>
                <uni-col :span="21">
                    <view class="zik"></view>
                    <text class="zi">1111111111年春节放假</text>
                </uni-col>
            </uni-row>
            <view class="zi2k">
                <text class="zi2">
                    假期开始时间：2023-11-16 00:00:00\n
                    假期结束时间：2023-11-16 00:00:00\n
                    时长：26天
                </text>
            </view>
        </view>
    </view>

    <view v-if="selectedValue==2">
        <view class="card1">
            <uni-row>
                <uni-col :span="3">
                    <image src="../../static/dengji.png" class="photo"></image>
                </uni-col>
                <uni-col :span="21">
                    <view class="zik"></view>
                    <text class="zi">2222222222年春节放假</text>
                </uni-col>
            </uni-row>
            <view class="zi2k">
                <text class="zi2">
                    假期开始时间：2023-11-16 00:00:00\n
                    假期结束时间：2023-11-16 00:00:00\n
                    时长：26天
                </text>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref } from 'vue';
import UniRow from "../../uni_modules/uni-row/components/uni-row/uni-row.vue";
import UniCol from "../../uni_modules/uni-row/components/uni-col/uni-col.vue";
import UniDataSelect from "../../uni_modules/uni-data-select/components/uni-data-select/uni-data-select.vue";

const selectedValue = ref('0'); // 设置默认选项为 '0'

const selectData = [{
    value: '0',
    text: '近一个月'
},
    {
        value: '1',
        text: '近半年'
    },
    {
        value: '2',
        text: '近一年'
    },
];
const change=function (){
    console.log(selectedValue._value)
}
</script>

<style scoped>
.select1 {
    width: 100px;
    height: 30px;
    background: #FFFFFF;
    border-radius: 15px;
    margin-top: 12px;
    margin-right: 20px;
    display: flex;
    flex-direction: row-reverse;
}

.card1 {
    width: 92%;
    height: 124px;
    background-image: linear-gradient(180deg, #E9F1FF 0%, #FFFFFF 100%);
    box-shadow: 0 2px 5px 0 #E2E4EB;
    border-radius: 10px;
    background-image: url("../../static/bg.png");
    margin-left: 20px;
    margin-top: 20px;
}

.photo {
    width: 22px;
    height: 22px;
    margin-left: 20px;
    margin-top: 14px;
}

.zi {
    width: 119px;
    height: 22px;
    font-family: PingFangSC-Medium;
    font-weight: 500;
    font-size: 16px;
    color: #212121;
}

.zik {
    margin-left: 10px;
    margin-top: 14px;
}

.zi2 {
    width: 203px;
    height: 66px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #5D5E5D;
    line-height: 22px;
}

.zi2k {
    margin-left: 20px;
    margin-top: 6px;
}

.container {
    display: flex;
    flex-direction: row-reverse;
}
</style>